<template>
  <div class="box">
    <!-- 沙发 -->
    <div class="sofa">
      <div class="box_top">
        <b class="iconfont icon-shafa"></b>
        <p>沙发SOFA</p>
        <p class="classify">
          <span>三人</span>
          <span>双人</span>
          <span>单人</span>
          <span>大三人</span>
          <span>更多</span>
        </p>
      </div>
      <div class="box_con" v-for="item in list" :key="item.id" v-tap="{methods:detail,id:item.pid}">
        <img :src="item.pimg" />
        <h3>{{item.pname}}</h3>
        <b>
          ￥{{item.pprice}}
          <span>起</span>
        </b>
      </div>
    </div>
    <!-- 床 -->
    <div class="chuang">
      <div class="box_top">
        <b class="iconfont icon-chuang"></b>
        <p>床·床具 BED</p>
        <p class="classify">
          <span>床</span>
          <span>床垫</span>
          <span>床品四件套</span>
          <span>被芯</span>
          <span>更多</span>
        </p>
      </div>
      <div class="box_con" v-for="item in list1" :key="item.id" v-tap="{methods:detail,id:item.pid}">
        <img :src="item.pimg" alt />
        <h3>{{item.pname}}</h3>
        <b>
          ￥{{item.pprice}}
          <span>起</span>
        </b>
      </div>
    </div>
    <!-- 柜架 -->
    <div class="chuang">
      <div class="box_top">
        <b class="iconfont icon-icon-test"></b>
        <p>柜架 STORAGE</p>
        <p class="classify">
          <span>COSMO</span>
          <span>置物柜</span>
          <span>书柜·书架</span>
          <span>电视柜</span>
          <span>更多</span>
        </p>
      </div>
      <div class="box_con" v-for="item in list2" :key="item.id" v-tap="{methods:detail,id:item.pid}">
        <img :src="item.pimg" alt />
        <h3>{{item.pname}}</h3>
        <b>
          ￥{{item.pprice}}
          <span>起</span>
        </b>
      </div>
    </div>
    <!-- 椅凳 -->
    <div class="dengzi">
      <div class="box_top">
        <b class="iconfont icon-zhuangxiushangjia-"></b>
        <p>椅凳 STATING</p>
        <p class="classify">
          <span>座椅</span>
          <span>坐墩</span>
          <span>休闲椅</span>
          <span>凳子</span>
          <span>更多</span>
        </p>
      </div>
      <div class="box_con" v-for="item in list3" :key="item.id" v-tap="{methods:detail,id:item.pid}">
        <img :src="item.pimg" alt />
        <h3>{{item.pname}}</h3>
        <b>
          ￥{{item.pprice}} 
          <span>起</span>
        </b>
      </div>
    </div>

    <!-- 桌几 -->
    <div class="zhuo">
      <div class="box_top">
        <b class="iconfont icon-youpinjiaju_danxian_zhuozi"></b>
        <p>桌几 TABLE/SIDE TABLE</p>
        <p class="classify">
          <span>书桌·餐桌</span>
          <span>茶几</span>
          <span>边几</span>
          <span>梳妆台</span>
          <span>更多</span>
        </p>
      </div>
      <div class="box_con" v-for="item in list4" :key="item.id" v-tap="{methods:detail,id:item.pid}">
        <img :src="item.pimg" alt />
        <h3>{{item.pname}}</h3>
        <b>
          ￥{{item.pprice}}
          <span>起</span>
        </b>
      </div>
    </div>

    <!-- 灯具 -->
    <div class="deng">
      <div class="box_top">
        <b class="iconfont icon-dengju"></b>
        <p>灯具 LIGHTING</p>
        <p class="classify">
          <span>台灯</span>
          <span>地灯</span>
          <span>吊灯</span>
          <span>更多</span>
        </p>
      </div>
      <div class="box_con" v-for="item in list5" :key="item.id" v-tap="{methods:detail,id:item.pid}">
        <img :src="item.pimg" alt />
        <h3>{{item.pname}}</h3>
        <b>
          ￥{{item.pprice}}
          <span>起</span>
        </b>
      </div>
    </div>
    <!-- 家纺 -->
    <div class="jia">
      <div class="box_top">
        <b class="iconfont icon-youpinjiaju_danxian_beizi"></b>
        <p>家纺 TEXTLINE</p>
        <p class="classify">
          <span>床品4件套</span>
          <span>被芯</span>
          <span>枕芯</span>
          <span>床褥</span>
          <span>更多</span>
        </p>
      </div>
      <div class="box_con" v-for="item in list6" :key="item.id" v-tap="{methods:detail,id:item.pid}">
        <img :src="item.pimg" alt />
        <h3>{{item.pname}}</h3>
        <b>
          ￥{{item.pprice}}
          <span>起</span>
        </b>
      </div>
    </div>
    <!-- 餐具 -->
    <div class="can">
      <div class="box_top">
        <b class="iconfont icon-canju"></b>
        <p>餐具 TABLEWARE</p>
        <p class="classify">
          <span>套装</span>
          <span>盘碗</span>
          <span>杯子</span>
          <span>储物</span>
          <span>更多</span>
        </p>
      </div>
      <div class="box_con" v-for="item in list7" :key="item.id" v-tap="{methods:detail,id:item.pid}">
        <img :src="item.pimg" alt />
        <h3>{{item.pname}}</h3>
        <b>
          ￥{{item.pprice}}
          <span>起</span>
        </b>
      </div>
    </div>
    <!-- 装饰 -->
    <div class="deng">
      <div class="box_top">
        <b class="iconfont icon-1"></b>
        <p>装饰 DECORATION</p>
        <p class="classify">
          <span>摆件·花瓶</span>
          <span>收纳</span>
          <span>墙镜</span>
          <span>装饰画</span>
          <span>更多</span>
        </p>
      </div>
      <div class="box_con" v-for="item in list8" :key="item.id" v-tap="{methods:detail,id:item.pid}">
        <img :src="item.pimg" alt />
        <h3>{{item.pname}}</h3>
        <b>
          ￥{{item.pprice}}
          <span>起</span>
        </b>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from "@/api/getProlist.js";
export default {
  name: "AllList",
  data() {
    return {
      list: [],
      list1:[],
      list2:[],
      list3:[],
      list4:[],
      list5:[],
      list6:[],
      list7:[],
      list8:[],
      active: 0
    };
  },
  mounted() {
    api.getProd({ pclass: 1 }).then(data => {
      this.list = data.data.result;
    });
    api.getProd({ pclass: 2 }).then(data => {
      this.list1 = data.data.result;
    });
    api.getProd({ pclass: 3 }).then(data => {
      this.list2 = data.data.result;
    });
    api.getProd({ pclass: 4 }).then(data => {
      this.list3 = data.data.result;
    });
    api.getProd({ pclass: 5 }).then(data => {
      this.list4 = data.data.result;
    });
    api.getProd({ pclass: 6 }).then(data => {
      this.list5 = data.data.result;
    });
    api.getProd({ pclass: 7 }).then(data => {
      this.list6 = data.data.result;
    });
    api.getProd({ pclass: 8 }).then(data => {
      this.list7 = data.data.result;
    });
    api.getProd({ pclass: 9 }).then(data => {
      this.list8 = data.data.result;
    });
  },
  methods:{
    detail(id){
      this.$router.push("/ProdDetail?id="+id.id);
    }
  }
};
</script>

<style scoped>
.box {
  overflow: hidden;
}
.box>div{
    margin-bottom: 50px;
    overflow: hidden;
}
.box_top {
  width: 100%;
  text-align: center;
}
.box_top .iconfont {
  font-size: 98px;
}
.box_top p{
  font-size: 48px;
  margin: 0;
}
.box_top .classify{
  height: 60px;
  text-align: center;
}
.box_top .classify span{
  padding: 0 10px;
  font-size:20px;

  border-right: 1px solid #ccc;
}
.box_top ul li:nth-child(5) {
  border: 0;
}
.box_con {
  width: 45%;
  float: left;
  margin: 10px;
  text-align: center;
  overflow: hidden;
}
.box_con img {
  width: 100%;
  height: 400px;
}
.box_con h3{
    width:100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
}
.box_more {
  margin: 120px 100px 0 0;
  border: 10px solid #ccc;
  padding: 30px;
  float: right;
}
</style>